<!DOCTYPE html>
<html lang="en"class="no-ie"style="overflow:hidden;">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
		<title></title>
		<!-- semantic的引入 -->
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

		<!-- amis的引入 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/404name/cdn@main/css/sdk.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/404name/cdn@main/css/helper.css" />
		<script src="https://cdn.jsdelivr.net/gh/404name/cdn@main/js/sdk.js"></script>
		<style>
			html,
		  body,
		  .app-wrapper {
		    position: relative;
		    width: 100%;
		    height: 100%;
		    margin: 0;
		    padding: 0;
		  }
		  .element::-webkit-scrollbar {display:none}
		</style>
	</head>
	<body>
	
		<!-- 导航栏 -->
		<div class="ui top attached tabular menu">
			<a class="item active" id="page1" onclick="gotoIndex()" data-tab="first">
				<i class="home icon"></i>首页
			</a>
			<a class="item" id="page2" onclick="gotoUser()" data-tab="second" >
				<i class="user circle icon"></i>
				个人中心
			</a>
			<div class="right menu">
				<div class="ui dropdown" id="login">
					<button class="ui blue button">
						<div id="qqMsg">
							<img class="ui right spaced avatar image" src="https://gitee.com/N404name/gitee-img/raw/master/myImg/u=2561659095,299912888&fm=26&gp=0.jpg">
							正在加载
							<i class="mail icon"></i> xx
						</div>
					</button>
					<div class="menu">
						<button class="item ui blue button" onclick="gotoUser()">
							<i class="mail icon"></i> 个人中心
						</button>
						<button class="item ui blue button" onclick="logout()">
							<i class="sign-out icon"></i> 退出登录
						</button>
					</div>
				</div>
				<button class="ui twitter button" id="notlogin" onclick="checkLogin()">
					<i class="qq icon"></i>
					登录
				</button>
			</div>
		</div>


		<!-- 页面 -->
		<div class="ui bottom attached tab active" data-tab="first">
			<!-- 制空 -->
		</div>
		<div class="ui bottom attached tab " data-tab="second">
			<!-- 制空 -->
		</div>
		<div class="ui bottom attached tab" data-tab="third">
			<!-- 制空制空 -->
		</div>

		<div id="root1" class="app-wrapper"></div>

		<!-- 弹出框 -->
		<div class="ui modal" id="checklogin">
			<i class="close icon"></i>
			<div class="header">
				~登录检测~
			</div>
			<div class="image content">
				<div class="ui medium image">
					<img src="https://gitee.com/N404name/gitee-img/raw/master/myImg/dahuai%20(3).jpg">
				</div>
				<div class="description">
					<div class="ui header">您目前未登录~请使用qq登录获取更多信息</div>
					<p>我们从<a href="https://www.gravatar.com" target="_blank">gravatar</a>抓取的下面这些图片，图像与你注册的邮箱地址相关.</p>
					<p>可以使用这张照片吗?</p>
				</div>
			</div>
			<div class="actions">
				<div class="ui black deny button">
					算了，我就逛逛
				</div>
				<div class="ui positive right labeled icon button">
					点击登录
					<i class="checkmark icon"></i>
				</div>
			</div>
		</div>

		<!-- 退出登录 -->
		<div class="ui basic modal" id="logout">
			<div class="ui icon header">
				<i class="archive icon"></i>
				你确定退出登录吗
			</div>
			<div class="content">
				<p>退出的话，本地讲清空你的信息</p>
			</div>
			<div class="actions">
				<div class="ui red basic cancel inverted button">
					<i class="remove icon"></i>
					否
				</div>
				<div class="ui green ok inverted button">
					<i class="checkmark icon"></i>
					是
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/loginCheck.js"></script>
		<script type="text/javascript">
			
			var qUrl = "http://java.404name.top/";
			var hUrl = "http://team.404name.top/api/";
			
			(function() {
				// 启动分页
				
				$('.menu .item')
					.tab();

				$('.ui.dropdown')
					.dropdown();

				// using context
				$('.context.example .ui.sidebar')
					.sidebar({
						context: $('.context.example .bottom.segment')
					})
					.sidebar('attach events', '.context.example .menu .item');
				alert("执行1")
				loadPage( "./json/index.json", "root1");

				$("#page2").click(function() {
					gotoUser();
				});
				
			})();

			function gotoUser() {
				
				if (localStorage.getItem("token") == null) {
					alert("请先登录");
					return;
				}
				loadPage("./json/user.json", "root1");

			}
			function gotoIndex() {
				loadPage("./json/index.json", "root1");
			}
			function loadPage(jsonUrl, id) {
				let amis = amisRequire('amis/embed');
				let amisJSON = "";
				// 通过替换下面这个配置来生成不同页面
				$.ajax({
					type: "GET",
					url: jsonUrl,
					data: {
						method: "query"
					},
					dataType: "json", //返回的数据类型
					success: function(data) {
						amisJSON = data;
						let amisScoped = amis.embed('#' + id, amisJSON);
						checkLogin();
						addTabs();
						addMsg();
					},
					error(data) {
						console.log(data);
						checkLogin();
					}
				})
			}
			function addMsg(){
				if(localStorage.getItem("groupClass") == null){
					localStorage.setItem("groupClass",0);
				}
				
				if(localStorage.getItem("groupClass")!=0){
					alert(localStorage.getItem("groupClass"))
					$.ajax({
					    url:hUrl + "groupClasss/" + localStorage.getItem("groupClass"),
					    type:"get",
					    headers: {
					      Authorization: localStorage.getItem("token")
					    },
					    contentType: "application/json;charset=UTF-8",
					    dataType:"json",
					    success:function (data) {
					        var html = "";
							html+='<img class="ui fluid rounded image" src="https://gitee.com/N404name/gitee-img/raw/master/team_up_img/'+data.competitionImg+'">' +
							'<p>'+data.competitionInfo+'</p>';
							var users = data.outstandingUsers;
							for(var i = 0; i < users.length; i++){
								if(users[i].userClass == 1){
									html += '<a class="ui blue image label">' +
									'<img src="'+users[i].headImg+'">' +
									users[i].realName+
									'  <div class="detail">优秀学生</div>' +
									'</a>';
								}else if(users[i].userClass == 2){
									html += '<a class="ui teal image label">' +
									'<img src="'+users[i].headImg+'">' +
									users[i].realName+
									'  <div class="detail">优秀指导老师</div>' +
									'</a>';
								}
							}
							$("#groupClassMsg").html(html);
					    }
					});
				}else{
					var html = "";
					html += '<img class="ui fluid rounded image" src="https://gitee.com/N404name/gitee-img/raw/master/myImg/moveGif.gif">'+
					'<p>一起组队吧：xxxxxxxx</p>'+
					'<a class="ui blue image label"><img src="https://gitee.com/N404name/gitee-img/raw/master/myImg/dahuai%20(3).jpg">404name' +
					'<div class="detail">项目作者</div></a>';
					$("#groupClassMsg").html(html);
				}
			}
			function addTabs(){
				
				$.ajax({
				    url:hUrl + "groupClasss",
				    type:"get",
				    headers: {
				      Authorization: localStorage.getItem("token")
				    },
				    contentType: "application/json;charset=UTF-8",
				    dataType:"json",
				    success:function (data) {
				        var nowTab = localStorage.getItem("groupClass");
						console.log(data);
						var html = "";
						if(nowTab != 0){
							html = '<a class="ui teal tag label" onclick="changeTo(0)">全部组队<div class="floating label">100+</div></a>';
						}
						else {
							html = '<a class="ui teal label" onclick="changeTo(0)">全部组队<div class="floating label">100+</div></a>';
						}
						var msg = data.items;
						for(var i = 0; i < msg.length; i++){
							html += '<a class="ui ';
							if(msg[i].competitionStatus == 0){
								html += "teal ";
							}else{
								html += "red ";
							}
							if(msg[i].id != nowTab){
								html += "tag ";
							}
							html += 'label" onclick="changeTo('+msg[i].id+')">'+msg[i].competitionName+'<div class="floating label">22</div></a>';
						}
						$("#groupClass").html(html);
				    }
				});
				
			}
			function changeTo(num){
				alert(num)
				localStorage.setItem("groupClass",num);
				window.location.href = "index.html";
			}
		</script>
	</body>
</html>
